﻿
@{
    ViewBag.Title = "Commonpage";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style>
    .w_container { width: 544px; height: 250px; background-color: #6FA9DD; background-image: -webkit-linear-gradient(top, rgb(13, 104, 188), rgb(114, 173, 224)); background-image: -ms-linear-gradient(top, rgb(13, 104, 188), rgb(114, 173, 224)); background-image: linear-gradient(top, rgb(13, 104, 188), rgb(114, 173, 224)); }
    .w_item { position: relative; float: left; width: 89px; height: 100%; color: #fff; font-family: '微软雅黑'; text-align: center; font-size: 12px; text-shadow: 1px 1px 1px #555; line-height: 1em; }
        .w_item:nth-child(1) { width: 186px; }
    .w_item_split { position: absolute; left: 0px; top: 48px; width: 1px; height: 180px; background: #fff; filter: alpha(opacity=15); opacity: 0.15; }
    .w_item_city { position: absolute; left: 0; top: 0; width: 82px; height: 28px; line-height: 28px; background-image: url(/images/leftCorner.png); background-repeat: no-repeat; background-size: 82px 28px; font-size: 15px; }
    .w_item_title { text-align: left; margin: 14px 0 0 80px; width: 300px; }
    .w_icon { display: block; width: 50px; height: 50px; margin: 15px 0 0 20px; border: none; }
    .w_icon_first { display: block; width: 70px; height: 70px; margin: 20px 0 0 60px; border: none; }
    .w_temp { margin-top: 27px; }
    .w_temp_first { padding-left: 14px; font-size: 32px; font-family: Arial; margin-top: 30px; }
    .w_state { margin-top: 8px; }

    .w_week { margin-top: 46px; }
    .w_rq { margin-top: 8px; filter: alpha(opacity=50); opacity: 0.5; text-shadow: none; }
    .w_state label { display: inline-block; background: #ff9900; margin-left: 5px; width: 85px; line-height: 18px; height: 18px; text-align: center; font-size: 12px; font-style: normal; color: #fff; text-decoration: none; vertical-align: middle; }
    .w_item:hover { background-image: -webkit-linear-gradient(top, rgba(255,255,255,.015), rgba(255,255,255,.15)); background-image: -o-linear-gradient(top, rgba(255,255,255,.015), rgba(255,255,255,.15)); background-image: -ms-linear-gradient(top, rgba(255,255,255,.015), rgba(255,255,255,.15)); background-image: -moz-linear-gradient(top, rgba(255,255,255,.015), rgba(255,255,255,.15)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr=#04FFFFFF,EndColorStr=#40FFFFFF); }

    #w_wdline, #w_sdline { width: 544px; height: 146px; }
</style>
<div class="w_container" id="pyWeather"></div>

<div id="w_wdline"></div>
<div id="w_sdline"></div>
@section scripts{
    <script src="~/Scripts/Highcharts-4.2.5/js/highcharts.js"></script>
    <script>
        $(function () {
            //绘制天气
            function weather(selector, city, data) {
                var info = data.showapi_res_body;
                var hz = ['', '一', '二', '三', '四', '五', '六', '日']
                function getRQ(s) {
                    return s.substr(4, 2) + "月" + s.substr(6, 2) + "日";
                }
                //解析数据，生成相应的DOM
                var content = '';
                content = '<div class="w_item">' +
                    '<div class="w_item_city">' + city + '</div>' +
                '<p class="w_item_title">周' + hz[info.f1.weekday] + getRQ(info.f1.day) + '(实时：' + info.now.temperature + '℃)</p>' +
                '<img class="w_icon_first" src="/images/' + info.now.weather_pic + '" />' +
                '<p class="w_temp_first">' + info.f1.night_air_temperature + '~' + info.f1.day_air_temperature + '<sup>℃</sup></p>' +
                '<p class="w_state">' + info.now.weather + '</p>' +
                '<p class="w_state">' + info.now.wind_direction + info.now.wind_power + '</p>' +
                '<p class="w_state">实时空气质量:<label>' + info.now.aqi + ' &nbsp; ' + info.now.aqiDetail.quality + '</label></p>' +
                '</div>';
                for (var i = 2; i <= 5; i++) {
                    info = data.showapi_res_body["f" + i];
                    content += '<div class="w_item">' +
                                '<div class="w_item_split"></div>' +
                                '<p class="w_week">周' + hz[info.weekday] + '</p>' +
                                '<p class="w_rq">' + getRQ(info.day) + '</p>' +
                                '<img class="w_icon" src="/images/' + info.day_weather_pic + '" />' +
                                 '<p class="w_temp">' + info.night_air_temperature + '~' + info.day_air_temperature + '℃</p>' +
                                '<p class="w_state">' + info.day_weather + '</p>' +
                                '<p class="w_state">' + info.day_wind_direction + info.day_wind_power + '</p>' +
                            '</div>'
                }

                //插入DOM
                $(selector).html(content);
            }
            weather("#pyWeather", "濮阳", { "showapi_res_code": 0, "showapi_res_error": "", "showapi_res_body": { "f6": { "day_weather": "小雨", "night_weather": "小雨", "night_weather_code": "07", "air_press": "1013 hPa", "jiangshui": "74%", "night_wind_power": "微风 <5.4m/s", "day_wind_power": "微风 <5.4m/s", "day_weather_code": "07", "sun_begin_end": "06:48|17:20", "ziwaixian": "中等", "day_weather_pic": "day/07.png", "weekday": 7, "night_air_temperature": "11", "day_air_temperature": "22", "day_wind_direction": "无持续风向", "day": "20161106", "night_weather_pic": "night/07.png", "night_wind_direction": "无持续风向" }, "f7": { "day_weather": "多云", "night_weather": "多云", "night_weather_code": "01", "air_press": "1013 hPa", "jiangshui": "18%", "night_wind_power": "微风 <5.4m/s", "day_wind_power": "微风 <5.4m/s", "day_weather_code": "01", "sun_begin_end": "06:49|17:19", "ziwaixian": "中等", "day_weather_pic": "day/01.png", "weekday": 1, "night_air_temperature": "6", "day_air_temperature": "17", "day_wind_direction": "无持续风向", "day": "20161107", "night_weather_pic": "night/01.png", "night_wind_direction": "无持续风向" }, "time": "20161101113000", "ret_code": 0, "cityInfo": { "c6": "henan", "c5": "濮阳", "c4": "puyang", "c3": "濮阳", "c9": "中国", "c8": "china", "c7": "河南", "c17": "+8", "c16": "AZ9393", "c1": "101181301", "c2": "puyang", "c11": "0393", "longitude": 114.995, "latitude": 35.702, "c10": "2", "c12": "457000", "c15": "53" }, "now": { "aqiDetail": { "co": 1.233, "so2": 28, "area": "濮阳", "o3": 42, "no2": 36, "area_code": "puyang", "quality": "良", "aqi": 76, "pm10": 99, "pm2_5": 53, "o3_8h": 16, "primary_pollutant": "颗粒物(PM10)" }, "weather_code": "00", "wind_direction": "南风", "temperature_time": "13:32", "wind_power": "2级", "aqi": 76, "sd": "62%", "weather_pic": "day/00.png", "weather": "晴", "temperature": "8" }, "f1": { "day_weather": "晴", "night_weather": "晴", "night_weather_code": "00", "air_press": "1013 hPa", "jiangshui": "0%", "night_wind_power": "微风 <5.4m/s", "day_wind_power": "微风 <5.4m/s", "day_weather_code": "00", "sun_begin_end": "06:43|17:24", "ziwaixian": "中等", "day_weather_pic": "day/00.png", "weekday": 2, "night_air_temperature": "3", "day_air_temperature": "13", "day_wind_direction": "东风", "day": "20161101", "night_weather_pic": "night/00.png", "night_wind_direction": "南风" }, "f3": { "day_weather": "晴", "night_weather": "晴", "night_weather_code": "00", "air_press": "1013 hPa", "jiangshui": "0%", "night_wind_power": "微风 <5.4m/s", "day_wind_power": "3-4级 5.5~7.9m/s", "day_weather_code": "00", "sun_begin_end": "06:45|17:22", "ziwaixian": "中等", "day_weather_pic": "day/00.png", "weekday": 4, "night_air_temperature": "8", "day_air_temperature": "20", "day_wind_direction": "南风", "day": "20161103", "night_weather_pic": "night/00.png", "night_wind_direction": "南风" }, "f2": { "day_weather": "晴", "night_weather": "晴", "night_weather_code": "00", "air_press": "1013 hPa", "jiangshui": "0%", "night_wind_power": "微风 <5.4m/s", "day_wind_power": "微风 <5.4m/s", "day_weather_code": "00", "sun_begin_end": "06:44|17:23", "ziwaixian": "中等", "day_weather_pic": "day/00.png", "weekday": 3, "night_air_temperature": "5", "day_air_temperature": "17", "day_wind_direction": "南风", "day": "20161102", "night_weather_pic": "night/00.png", "night_wind_direction": "西南风" }, "f5": { "day_weather": "晴", "night_weather": "阴", "night_weather_code": "02", "air_press": "1013 hPa", "jiangshui": "0%", "night_wind_power": "微风 <5.4m/s", "day_wind_power": "3-4级 5.5~7.9m/s", "day_weather_code": "00", "sun_begin_end": "06:47|17:21", "ziwaixian": "中等", "day_weather_pic": "day/00.png", "weekday": 6, "night_air_temperature": "11", "day_air_temperature": "21", "day_wind_direction": "北风", "day": "20161105", "night_weather_pic": "night/02.png", "night_wind_direction": "无持续风向" }, "f4": { "day_weather": "晴", "night_weather": "晴", "night_weather_code": "00", "air_press": "1013 hPa", "jiangshui": "0%", "night_wind_power": "3-4级 5.5~7.9m/s", "day_wind_power": "3-4级 5.5~7.9m/s", "day_weather_code": "00", "sun_begin_end": "06:46|17:21", "ziwaixian": "中等", "day_weather_pic": "day/00.png", "weekday": 5, "night_air_temperature": "10", "day_air_temperature": "21", "day_wind_direction": "南风", "day": "20161104", "night_weather_pic": "night/00.png", "night_wind_direction": "无持续风向" } } });
            //处理xml文件
            var pyxml = '@Html.Raw(ViewBag.py)';
            var pgxml = '@Html.Raw(ViewBag.pg)';
            var nmxml = '@Html.Raw(ViewBag.nm)';
            var py = {}, pg = {}, nm = {};
            py.h = [], py.wd = [], py.sd = [];
            $($(pyxml)[2]).find("qw").each(function (i, qw) {
                if (i % 2 == 0) {
                    py.h.unshift($(qw).attr("h"));
                    py.wd.unshift(parseFloat($(qw).attr("wd")));
                    py.sd.unshift(parseFloat($(qw).attr("sd")));
                }
            })
            pg.h = [], pg.wd = [], pg.sd = [];
            $($(pgxml)[2]).find("qw").each(function (i, qw) {
                pg.h.unshift($(qw).attr("h"));
                pg.wd.unshift(parseFloat($(qw).attr("wd")));
                pg.sd.unshift(parseFloat($(qw).attr("sd")));
            })
            nm.h = [], nm.wd = [], nm.sd = [];
            $($(nmxml)[2]).find("qw").each(function (i, qw) {
                nm.h.unshift($(qw).attr("h"));
                nm.wd.unshift(parseFloat($(qw).attr("wd")));
                pg.sd.unshift(parseFloat($(qw).attr("sd")));
            })
            //绘制折线
            function drawLine(selector, city, cat, val, unit) {
                $(selector).highcharts({
                    title: {
                        text: ''
                    },
                    chart: {
                        backgroundColor: '#6FA9DD',
                        type: 'line'
                    },
                    xAxis: {
                        categories: cat,
                        lineColor: "#fff",
                        tickColor: "#fff",
                        labels: { style: { color: '#fff' } }
                    },
                    yAxis: {
                        title: {
                            text: unit,
                            style: { color: '#fff' }
                        },
                        labels: { style: { color: '#fff' } },
                        lineColor: "#fff",
                        tickColor: "#fff",
                        gridLineColor: "#fff"
                    },
                    tooltip: {
                        valueSuffix: '°C'
                    },
                    legend: {
                        enabled: false
                    },
                    plotOptions: {
                        line: {
                            color: '#fff',
                            tooltip: {
                                pointFormat: '<span style="color:{point.color}">\u25CF</span> <b>{point.y}</b><br/>',
                                headerFormat: '<span style="font-size: 10px">{point.key}时</span><br/>'
                            }
                        }
                    },
                    series: [{
                        name: city,
                        data: val,
                        type: 'line'
                    }],
                    credits: { enabled: false }
                });
            }
            drawLine('#w_wdline', '濮阳', py.h, py.wd, '气温');
            drawLine('#w_sdline', '濮阳', py.h, py.sd, '湿度');

        });
    </script>

}